<template>
  <div :class="[ns.b(), ns.e(props.type)]">
    <span><slot /></span>
  </div>
</template>
<script lang="ts">
  export default { name: 'TableComponet' }
</script>
<script setup lang="ts">
  // ui层和业务层，暴露一些方法
  import { useUamespace } from '@/hooks/use-namesapce'
  const props = defineProps({
    type: {
      type: String,
      defalut: '',
    },
  })
  const ns = useUamespace('tab')
</script>
<style lang="scss" scoped>
  @include b(tab) {
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 4px;
    border-radius: 2px;
    span {
      line-height: 1;
    }
  }
  .a-tab__success {
    background-color: $success-bg;
    color: $success;
  }
  .a-tab__warning {
    background-color: #fff5e7;
    color: #ff9600;
  }
  .a-tab__error {
    background-color: #ffebeb;
    color: #de3b3b;
  }
  .a-tab__info {
    background-color: #eeeeee;
    color: #787878;
  }
</style>
